import React from 'react'
import TextInput from './TextInput'
import downImg from '../image/down.png'
import PropTypes from "prop-types";

export const Header = (props) => (
  <header className="header">
    <img className="header-img" src={downImg} alt="全部完成" onClick={props.completeAll}/>
    <TextInput
      newTodo
      onSave={(text) => {
        if (text.length !== 0) {
            props.addTodo(text)
        }
      }}
      placeholder="What needs to be done?"
    />
  </header>
);

Header.propTypes = {
    addTodo: PropTypes.func.isRequired,
    completeAll: PropTypes.func.isRequired,
};

export default Header